<template>
<div>
    <div  @click="showModal">
        <Input v-model="inputVal" :placeholder="placeholder" readonly autocomplete="off">
            <!--<Button slot="append" icon="ios-search" @click="showModal">{{btnText}}</Button>-->
        </Input>
    </div>

    <Modal v-model="isShowModal" :title="btnText" @on-ok="onOk" @on-cancel="onCancel" width="580" :transfer="false">
        <Row style="margin-bottom:10px">
            <Col span=8>
               <OrgSelect  v-model="queryModel.orgId" :partners-id="partnersId" :parent-id="CurUserInfo.UserOrgStructID"  placeholder='请选择部门'></OrgSelect>
            </Col>

            <Col span=8>
                <Input v-model="queryModel.UserRealName" placeholder="名字或拼音"></Input>
            </Col>
        </Row>
        <Table :loading="isLoadingData" :highlight-row="isHighlightRow" border :columns="columns" rowKey="UserID" :data="userItems" height="310" size="small" no-data-text="暂无数据" @on-current-change="onCurrentRowChange" @on-select="onSelectRow" @on-select-cancel="onSelectRowCancel"
            @on-selection-change="onSelectRowChange"></Table>
        <Row type="flex" justify="end" v-show="page.rsCount>0" style="margin-top:10px">
            <Col>
            <Page :total="page.rsCount" :current="page.curPage" :page-size="page.pageSize" size="small" show-elevator @on-change="onPageChange"></Page>
            </Col>
        </Row>
    </Modal>
</div>
</template>

<script>
import AppFrame from '../libs/app-frame';
import OrgSelect from './org-select';
export default {
    name: 'user-select',
    props: ['btnText', 'value', 'multiple', 'placeholder', 'partnersId'],
    model: {
        prop: 'value',
        event: 'updateVal'
    },
    components: {
        OrgSelect
    },
    data: function() {
        return {
            CurUserInfo: {},
            isLoadingData: true,
            isShowModal: false,
            isHighlightRow: false,
            inputVal: "",
            columns: [{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '姓名',
                    key: 'UserRealName',

                },
                {
                    title: "所属组织",
                    key: "UserOrgStructName",
                    width: 130
                },
                {
                    title: '岗位',
                    key: 'UserTypeName',
                    width: 120
                }
            ],
            page: {
                rsCount: 0,
                curPage: 1,
                pageSize: 20
            },
            selectItems: [],
            userItems: [],
            queryModel:{
                UserRealName:'',
                orgId:''
            }
        }
    },
    computed: {

    },
    watch: {
        value: function(curVal, oldVal) {
            if (curVal && curVal != oldVal && curVal != '') {
                this.getSelectItems();
            }
        },
        "queryModel.UserRealName":function(curVal,oldVal){
     
            if (curVal && curVal != oldVal) {
                this.getUserItems();
            }
        },
        "queryModel.orgId":function(curVal,oldVal){
    
            if (curVal && curVal != oldVal && curVal != '') {
                this.getUserItems();
            }
        }
    },
    created() {
         this.CurUserInfo = AppFrame.UserInfo.getUserInfo();
        if (!this.multiple) {
            this.isHighlightRow = true;
            this.columns.splice(0, 1);
        } else {
            this.isHighlightRow = false;
        };

    },
    methods: {
        showModal() {
            this.isShowModal = true;
            this.getUserItems();
        },
        onOk() {
            let ids = [];
            let names = [];
            this.selectItems.map(function(item) {
                ids.push(item.UserID);
                names.push(item.UserRealName);
            });
            this.inputVal = names.join(',');
            this.setValue(ids);
        },
        onCancel() {
            this.isShowModal = false;
        },
        async getSelectItems() {
            let self = this;
            if (this.selectItems.length > 0) return;
            let postData = {
                CurPage: 1,
                PageSize: 100000,
                PartnersID: this.partnersId,
                userIds: this.value
            };

            let ret = await AppFrame.Http.Post("/manage-api/system/admin-user/getItems", postData);
            if (ret && ret.Result == 1) {
                this.selectItems = ret.Data.DataList;
                let names = [];
                this.selectItems.map(function(item) {
                    names.push(item.UserRealName);
                });
                this.inputVal = names.join(',');
            }
        },
        async getUserItems() {
            let self = this;
            let postData = {
                CurPage: this.page.curPage,
                PageSize: this.page.pageSize,
                Sort: 'UserID|desc',
                PartnersID: this.partnersId,
                UserRealName:this.queryModel.UserRealName,
                UserOrgStructID:this.queryModel.orgId
            };

            this.isLoadingData = true;

            let ret = await AppFrame.Http.Post("/manage-api/system/admin-user/getItems", postData);
            this.isLoadingData = false;
            if (ret && ret.Result == 1) {
                this.page.rsCount = ret.Data.RsCount;
                this.CurPage = ret.Data.CurPage;
                this.userItems.splice(0, this.userItems.length);
                this.userItems = ret.Data.DataList;
                this.userItems.map(function(item) {
                    for (let i = 0; i < self.selectItems.length; i++) {
                        if (self.selectItems[i].UserID == item.UserID) {
                            if (self.multiple) {
                                item._checked = true;
                            } else {
                                item._highlight = true;
                            }

                        }
                    }
                })
            }
        },
        onPageChange(curPage) {
            this.page.curPage = curPage;
            this.getUserItems();
        },
        //单选时有效
        onCurrentRowChange(currentRow) {
            this.selectItems.splice(0, this.selectItems.length);
            this.selectItems.push(currentRow);
        },
        onSelectRow(selection, row) {
            // console.log(selection);
            // console.log(row);
        },
        onSelectRowCancel(selection, row) {

        },
        onSelectRowChange(selection) {
            //找到当前页没有被选中的
            let self = this;
            let unSelectItems = [];
            this.userItems.map(function(item) {
                if (selection.findIndex((a) => a.UserID == item.UserID) < 0) {
                    unSelectItems.push(item);
                }
            });

            //添加新选的

            for (let i = 0; i < selection.length; i++) {
                let ishas = false;
                self.selectItems.map(function(item) {
                    if (item.UserID == selection[i].UserID) {
                        ishas = true;
                    }
                });
                if (!ishas) {
                    self.selectItems.push(selection[i]);
                }
            }
            //移除没有的
            unSelectItems.map(function(item) {
                for (let i = self.selectItems.length - 1; i >= 0; i--) {
                    if (item.UserID == self.selectItems[i].UserID) {
                        self.selectItems.splice(i, 1);
                        continue;
                    }
                }
            })

        },
        setValue: function(val) {
            this.$emit("updateVal", val);
        }

    }
}
</script>

<style scoped>

</style>